React Custom Hook State Machine: Att bemästra abstraktion av komplex statelogik

När React-applikationer växer i komplexitet kan statshantering bli en betydande utmaning. Traditionella metoder med `useState` och `useEffect` kan snabbt leda till trasslig logik och svårhanterlig kod, särskilt när man hanterar intrikata statövergångar och sidoeffekter. Det är här tillståndsmaskiner, och specifikt React-anpassade hooks som implementerar dem, kommer till undsättning. Denna artikel kommer att guida dig genom konceptet med tillståndsmaskiner, visa hur man implementerar dem som anpassade hooks i React och illustrera de fördelar de erbjuder för att bygga skalbara och underhållbara applikationer för en global publik.

Vad är en tillståndsmaskin?

En tillståndsmaskin (eller finit tillståndsmaskin, FSM) är en matematisk modell för beräkning som beskriver beteendet hos ett system genom att definiera ett ändligt antal tillstånd och övergångarna mellan dessa tillstånd. Tänk på det som ett flödesschema, men med striktare regler och en mer formell definition. Viktiga begrepp inkluderar:

• Tillstånd: Representerar olika villkor eller faser i systemet.
• Övergångar: Definierar hur systemet rör sig från ett tillstånd till ett annat baserat på specifika händelser eller villkor.
• Händelser: Utlösare som orsakar statövergångar.
• Initialt tillstånd: Det tillstånd som systemet börjar i.

Tillståndsmaskiner utmärker sig i att modellera system med väldefinierade tillstånd och tydliga övergångar. Exempel finns i överflöd i verkliga scenarier:

• Traffic Lights: Cykla genom tillstånd som Röd, Gul, Grön, med övergångar utlösta av timers. Detta är ett globalt igenkännbart exempel.
• Order Processing: En e-handelsorder kan övergå genom tillstånd som "Väntar", "Bearbetar", "Skickat" och "Levererat". Detta gäller universellt för online-detaljhandel.
• Autentiseringsflöde: En användarautentiseringsprocess kan involvera tillstånd som "Utloggad", "Loggar in", "Inloggad" och "Fel". Säkerhetsprotokoll är generellt konsekventa över länder.

Varför använda tillståndsmaskiner i React?

Att integrera tillståndsmaskiner i dina React-komponenter erbjuder flera övertygande fördelar:

• Förbättrad kodorganisation: Tillståndsmaskiner tvingar fram ett strukturerat tillvägagångssätt för statshantering, vilket gör din kod mer förutsägbar och lättare att förstå. Inga mer spaghettikod!
• Reducerad komplexitet: Genom att explicit definiera tillstånd och övergångar kan du förenkla komplex logik och undvika oavsiktliga sidoeffekter.
• Förbättrad testbarhet: Tillståndsmaskiner är i sig testbara. Du kan enkelt verifiera att ditt system fungerar korrekt genom att testa varje tillstånd och övergång.
• Ökad underhållbarhet: Den deklarativa naturen hos tillståndsmaskiner gör det lättare att modifiera och utöka din kod när din applikation utvecklas.
• Bättre visualiseringar: Verktyg finns som kan visualisera tillståndsmaskiner, vilket ger en tydlig översikt över ditt systems beteende, vilket hjälper till samarbete och förståelse över team med olika färdigheter.

Implementera en tillståndsmaskin som en React Custom Hook

Låt oss illustrera hur man implementerar en tillståndsmaskin med en React custom hook. Vi kommer att skapa ett enkelt exempel på en knapp som kan vara i tre tillstånd: `idle`, `loading` och `success`. Knappen börjar i `idle`-tillståndet. När den klickas övergår den till `loading`-tillståndet, simulerar en laddningsprocess (med `setTimeout`) och övergår sedan till `success`-tillståndet.

1. Definiera tillståndsmaskinen

Först definierar vi tillstånden och övergångarna för vår knapptillståndsmaskin:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Efter 2 sekunder, övergå till success
      },
    },
    success: {},
  },
};

Denna konfiguration använder en biblioteksagnostisk (även om den är inspirerad av XState) strategi för att definiera tillståndsmaskinen. Vi kommer att implementera logiken för att tolka denna definition själva i den anpassade hooken. Egenskapen `initial` ställer in det initiala tillståndet till `idle`. Egenskapen `states` definierar de möjliga tillstånden (`idle`, `loading` och `success`) och deras övergångar. `idle`-tillståndet har en `on`-egenskap som definierar en övergång till `loading`-tillståndet när en `CLICK`-händelse inträffar. `loading`-tillståndet använder egenskapen `after` för att automatiskt övergå till `success`-tillståndet efter 2000 millisekunder (2 sekunder). `success`-tillståndet är ett terminalt tillstånd i detta exempel.

2. Skapa den anpassade Hooken

Låt oss nu skapa den anpassade hooken som implementerar tillståndsmaskinlogiken:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Rensa vid avmontering eller statändring
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Denna `useStateMachine`-hook tar tillståndsmaskinens definition som ett argument. Den använder `useState` för att hantera det aktuella tillståndet och kontexten (vi kommer att förklara kontext senare). Funktionen `transition` tar en händelse som ett argument och uppdaterar det aktuella tillståndet baserat på de definierade övergångarna i tillståndsmaskinens definition. `useEffect`-hooken hanterar `after`-egenskapen och ställer in timers för att automatiskt övergå till nästa tillstånd efter en angiven varaktighet. Hooken returnerar det aktuella tillståndet, kontexten och funktionen `transition`.

3. Använd den anpassade Hooken i en komponent

Låt oss slutligen använda den anpassade hooken i en React-komponent:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Efter 2 sekunder, övergå till success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Klicka här';
  if (currentState === 'loading') {
    buttonText = 'Laddar...';
  } else if (currentState === 'success') {
    buttonText = 'Lyckades!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Denna komponent använder `useStateMachine`-hooken för att hantera knappens tillstånd. Funktionen `handleClick` skickar `CLICK`-händelsen när knappen klickas (och bara om den är i `idle`-tillståndet). Komponenten renderar olika text baserat på det aktuella tillståndet. Knappen är inaktiverad under laddning för att förhindra flera klick.

Hantering av kontext i tillståndsmaskiner

I många verkliga scenarier behöver tillståndsmaskiner hantera data som kvarstår över statövergångar. Denna data kallas kontext. Kontext låter dig lagra och uppdatera relevant information när tillståndsmaskinen fortskrider.

Låt oss utöka vårt knappexempel för att inkludera en räknare som ökar varje gång knappen laddas framgångsrikt. Vi kommer att modifiera tillståndsmaskindefinitionen och den anpassade hooken för att hantera kontext.

1. Uppdatera tillståndsmaskindefinitionen

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Vi har lagt till en `context`-egenskap i tillståndsmaskindefinitionen med ett initialt `count`-värde på 0. Vi har också lagt till en `entry`-åtgärd i `success`-tillståndet. `entry`-åtgärden utförs när tillståndsmaskinen går in i `success`-tillståndet. Den tar den aktuella kontexten som ett argument och returnerar en ny kontext med `count` ökade. `entry` här visar ett exempel på att modifiera kontexten. Eftersom Javascript-objekt skickas med referens är det viktigt att returnera ett *nytt* objekt snarare än att mutera originalet.

2. Uppdatera den anpassade Hooken

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Rensa vid avmontering eller statändring
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Vi har uppdaterat `useStateMachine`-hooken för att initiera `context`-tillståndet med `stateMachineDefinition.context` eller ett tomt objekt om ingen kontext tillhandahålls. Vi har också lagt till en `useEffect` för att hantera `entry`-åtgärden. När det aktuella tillståndet har en `entry`-åtgärd utför vi den och uppdaterar kontexten med det returnerade värdet.

3. Använd den uppdaterade Hooken i en komponent

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Klicka här';
  if (currentState === 'loading') {
    buttonText = 'Laddar...';
  } else if (currentState === 'success') {
    buttonText = 'Lyckades!';
  }

  return (
    

      
        {buttonText}
      
      
Antal: {context.count}
    
  );
};

export default MyButton;

Vi kommer nu åt `context.count` i komponenten och visar den. Varje gång knappen laddas framgångsrikt ökar räknaren.

Avancerade tillståndsmaskinkoncept

Medan vårt exempel är relativt enkelt kan tillståndsmaskiner hantera mycket mer komplexa scenarier. Här är några avancerade koncept att tänka på:

• Vakter: Villkor som måste uppfyllas för att en övergång ska inträffa. Till exempel kan en övergång bara tillåtas om en användare är autentiserad eller om ett visst datavärde överskrider ett tröskelvärde.
• Åtgärder: Sidoeffekter som utförs när du går in i eller lämnar ett tillstånd. Dessa kan inkludera att göra API-anrop, uppdatera DOM eller skicka händelser till andra komponenter.
• Parallella tillstånd: Låter dig modellera system med flera samtidiga aktiviteter. Till exempel kan en videospelare ha en tillståndsmaskin för uppspelningskontroller (spela upp, pausa, stoppa) och en annan för att hantera videokvaliteten (låg, medium, hög).
• Hierarkiska tillstånd: Låter dig kapsla tillstånd inom andra tillstånd, vilket skapar en hierarki av tillstånd. Detta kan vara användbart för att modellera komplexa system med många relaterade tillstånd.

Alternativa bibliotek: XState och mer

Medan vår anpassade hook ger en grundläggande implementering av en tillståndsmaskin, kan flera utmärkta bibliotek förenkla processen och erbjuda mer avancerade funktioner.

XState

XState är ett populärt JavaScript-bibliotek för att skapa, tolka och exekvera tillståndsmaskiner och statskartor. Det tillhandahåller ett kraftfullt och flexibelt API för att definiera komplexa tillståndsmaskiner, inklusive stöd för vakter, åtgärder, parallella tillstånd och hierarkiska tillstånd. XState erbjuder också utmärkta verktyg för att visualisera och felsöka tillståndsmaskiner.

Andra bibliotek

Andra alternativ inkluderar:

• Robot: Ett lättviktigt statshanteringsbibliotek med fokus på enkelhet och prestanda.
• react-automata: Ett bibliotek speciellt utformat för att integrera tillståndsmaskiner i React-komponenter.

Valet av bibliotek beror på de specifika behoven i ditt projekt. XState är ett bra val för komplexa tillståndsmaskiner, medan Robot och react-automata är lämpliga för enklare scenarier.

Bästa praxis för att använda tillståndsmaskiner

För att effektivt utnyttja tillståndsmaskiner i dina React-applikationer, överväg följande bästa praxis:

• Börja smått: Börja med enkla tillståndsmaskiner och öka gradvis komplexiteten efter behov.
• Visualisera din tillståndsmaskin: Använd visualiseringsverktyg för att få en tydlig förståelse av din tillståndsmaskins beteende.
• Skriv omfattande tester: Testa noggrant varje tillstånd och övergång för att säkerställa att ditt system fungerar korrekt.
• Dokumentera din tillståndsmaskin: Dokumentera tydligt tillstånden, övergångarna, vakterna och åtgärderna för din tillståndsmaskin.
• Överväg internationalisering (i18n): Om din applikation riktar sig till en global publik, se till att din tillståndsmaskinlogik och användargränssnitt är korrekt internationaliserade. Använd till exempel separata tillståndsmaskiner eller kontext för att hantera olika datumformat eller valutasymboler baserat på användarens språk.
• Tillgänglighet (a11y): Se till att dina statövergångar och UI-uppdateringar är tillgängliga för användare med funktionsnedsättningar. Använd ARIA-attribut och semantisk HTML för att ge rätt kontext och feedback till hjälpmedelstekniker.

Slutsats

React custom hooks i kombination med tillståndsmaskiner ger en kraftfull och effektiv metod för att hantera komplex statelogik i React-applikationer. Genom att abstrahera statövergångar och sidoeffekter i en väldefinierad modell kan du förbättra kodorganisationen, minska komplexiteten, förbättra testbarheten och öka underhållbarheten. Oavsett om du implementerar din egen anpassade hook eller utnyttjar ett bibliotek som XState, kan det att införliva tillståndsmaskiner i ditt React-arbetsflöde avsevärt förbättra kvaliteten och skalbarheten hos dina applikationer för användare över hela världen.